<template> 
    <div class="form-container" shadow="never" id="pay-param-container">
        <el-form :model="sysPayParam" :rules="rules" ref="SysPayParamFrom" label-width="150px">
            <el-card class="box-card" style="border:none;" shadow="never">
                 <div slot="header" class="clearfix">
                    <span>支付接口配置信息</span>
                </div>
                 <el-row>
                    <el-col :span="12">
                        <el-form-item 
                                label="商户账户"
                                prop="name">
                            <el-input v-model="sysPayParam.name" style="width: 370px;"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                            <el-form-item 
                                label="商家密码"
                                prop="password">
                            <el-input v-model="sysPayParam.password" style="width: 370px;"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>

            <el-row>
                <el-col :span="12" style="padding-right:50px;">
                    <el-card class="box-card" >
                        <div slot="header" class="clearfix">
                            <span>读取登录接口配置信息</span>
                        </div>
                        <el-row>
                           <el-col :span="24">
                               <el-form-item
                                    label="商户编码"
                                    prop="mchuid">
                                    <el-input v-model="sysPayParam.mchuid" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                    label="门店编码"
                                    prop="mchmid">
                                    <el-input v-model="sysPayParam.mchmid" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                    label="用户编码"
                                    prop="userid">
                                    <el-input v-model="sysPayParam.userid" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                    label="auth Key"
                                    prop="loginKey">
                                    <el-input v-model="sysPayParam.loginKey" style="width: 370px;"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <el-col :span="12" style="padding-right:50px;">
                      <el-card class="box-card" >
                          <div slot="header" class="clearfix">
                            <span>读取支付接口配置信息</span>
                        </div>
                        <el-row>
                            <el-col :span="24">
                               <el-form-item
                                    label="密钥"
                                    prop="posKey">
                                    <el-input v-model="sysPayParam.posKey" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                    label="网关地址"
                                    prop="gatewayUrl">
                                    <el-input v-model="sysPayParam.gatewayUrl" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                    label="门店唯一编码"
                                    prop="storeNum">
                                    <el-input v-model="sysPayParam.storeNum" style="width: 370px;"/>
                                </el-form-item>
                                <el-form-item
                                    label="厂商备注"
                                    prop="remark">
                                    <el-input v-model="sysPayParam.remark" style="width: 370px;"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                      
                    </el-card>
                    
                </el-col>
            </el-row>
           <el-row>
                <el-col :span="24" style="text-align:right;padding:25px 50px;">
                    <el-button type="primary" @click="onSubmit('SysPayParamFrom')">读取配置</el-button>
                    <el-button v-if="!isEdit" @click="resetForm('SysPayParamFrom')">保存配置</el-button>
                </el-col>
           </el-row>



                  <!--
                        <el-form-item
                            label="id"
                            prop="id">
                        <el-input v-model="sysPayParam.id" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="商户账户"
                            prop="name">
                        <el-input v-model="sysPayParam.name" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="商家密码"
                            prop="password">
                        <el-input v-model="sysPayParam.password" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="商家ID"
                            prop="mchuid">
                        <el-input v-model="sysPayParam.mchuid" style="width: 370px;"/>
                    </el-form-item>

                     <el-form-item
                            label="门店ID"
                            prop="mchmid">
                        <el-input v-model="sysPayParam.mchmid" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="当前账户ID"
                            prop="userid">
                        <el-input v-model="sysPayParam.userid" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="当前用户auth2的key"
                            prop="loginKey">
                        <el-input v-model="sysPayParam.loginKey" style="width: 370px;"/>
                    </el-form-item>
                   -->


                   


                    <!--
                        <el-form-item
                            label="密钥"
                            prop="posKey">
                        <el-input v-model="sysPayParam.posKey" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="网关地址"
                            prop="gatewayUrl">
                        <el-input v-model="sysPayParam.gatewayUrl" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="商户门店名称"
                            prop="storeName">
                        <el-input v-model="sysPayParam.storeName" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="商户门店唯一码"
                            prop="storeNum">
                        <el-input v-model="sysPayParam.storeNum" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="设备厂商备注"
                            prop="remark">
                        <el-input v-model="sysPayParam.remark" style="width: 370px;"/>
                    </el-form-item>


                    <el-form-item
                            label="createTime"
                            prop="createTime">
                        <el-input v-model="sysPayParam.createTime" style="width: 370px;"/>
                    </el-form-item>
                     -->


            
        </el-form>
    </div>
</template>
<script>
    import {createSysPayParam, getSysPayParam, updateSysPayParam} from '@/api/sys/sysPayParam'
    import SingleUpload from '@/components/Upload/singleUpload'

    const defaultSysPayParam = {
        name: ''
    };
    export default {
        name: 'SysPayParamDetail',
        components: {SingleUpload},
        props: {
            isEdit: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
            sysPayParam:
            Object.assign({},
        defaultSysPayParam),
            rules: {
                name: [
                    {required: true, message: '请输入账号信息', trigger: 'blur'},
                    {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
                ]
            }
        }
        },
        created() {
            if (this.isEdit) {
                getSysPayParam(this.$route.query.id).then(response => {
                    this.sysPayParam = response.data;
            })
                ;
            } else {
                this.sysPayParam = Object.assign({},
            defaultSysPayParam)
                ;
            }
        },
        methods: {
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if(valid) {
                        this.$confirm('是否提交数据', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            if(this.isEdit
                    )
                        {
                            updateSysPayParam(this.$route.query.id, this.sysPayParam).then(response => {
                                if(response.code == 200
                        )
                            {
                                this.$refs[formName].resetFields();
                                this.$message({
                                    message: '修改成功',
                                    type: 'success',
                                    duration: 1000
                                });
                                this.$router.back();
                            }
                        else
                            {
                                this.$message({
                                    message: response.msg,
                                    type: 'error',
                                    duration: 1000
                                });
                            }

                        })
                            ;
                        }
                    else
                        {
                            createSysPayParam(this.sysPayParam).then(response => {
                                if(response.code == 200
                        )
                            {
                                this.$refs[formName].resetFields();
                                this.sysPayParam = Object.assign({},
                            defaultSysPayParam)
                                ;
                                this.$message({
                                    message: '提交成功',
                                    type: 'success',
                                    duration: 1000
                                });
                                this.$router.back();
                            }
                        else
                            {
                                this.$message({
                                    message: response.msg,
                                    type: 'error',
                                    duration: 1000
                                });
                            }

                        })
                            ;
                        }
                    })
                        ;

                    } else {
                        this.$message({
                            message: '验证失败',
                            type: 'error',
                            duration: 1000
                        });
                return false;
            }
            })
                ;
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.sysPayParam = Object.assign({},
            defaultSysPayParam)
                ;
            }
        }
    }
</script>
<style>
    #pay-param-container .el-card__header {
        border-bottom: none;
        text-align: center;
    }
</style>

<style  rel="stylesheet/scss" lang="scss" scoped>
    .form-container {
        position: relative; 
        left: 0;
        right: 0;
        width: 100%; 
        padding: 35px 35px 15px 35px;
    }
</style>


